
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'bq.jsp' starting page</title>
      <meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="total.css">
  </head>
  <style>
	body{
	position: relative;
	width: 100%;
	height: 100%;	
	overflow: hidden;
	}
	#note{
		width: 100%;
		height: 100%;
		position:absolute;
		z-index: 2;
	}
	.bq{
	width:400px;
	height: 250px;
	/* border:1px solid #000; */
	position: absolute;
	background-image: url("img/s212.png") ;
	background-position: center;
	background-repeat: no-repeat;
	
	}
	.fz{

	text-align: center;
	line-height: 30px;
	margin-top: 150px;
	margin-left: 50px;
	display: block;
	width: 70%;
	height: 30px;
	/* border: 1px solid #000; */
	}
	/* ___________________________________________________________- */
	#bar{
		width: 100%;
		height: 100%;
		position:absolute;
		z-index: 3;
	}
	#barr{
	width: 2000px;
	/* border: 1px solid #000; */
	position: relative;
	height:100%;
	overflow: hidden; 
	margin: 0 auto;
	font-family: "宋体";
	font-weight: bold;
	}
	.barr{
	height: 40px;
	border: 1px solid rgba(204,204,204,.6);
	background-color: rgba(204,204,204,.3);
	border-radius: 20px;
	position: absolute;
	padding-right: 50px;
	white-space:nowrap;
	}
	.bim{
	display:block;
	width: auto;
	height: 40px;
	border-radius: 50%;
	float: left;
	margin-right:-100px;
	}
	.barr span{
    display:inline-block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-left: 70px;
	float: right;
	white-space:nowrap;
	}
	
</style>
  <body>
    <div id="note">
  
    </div>
    <div id="bar">
    
    
    <input type="button" class="button_ita" value="再看一次" onclick="again()">
	<input type="button" class="button_ita" value="添加字幕" onclick="add()">
	<input type="text" name="mes" class="txt large">
 	<div id="barr">
 	<div class="barr"><img class="bim" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2798762947,3742112450&fm=27&gp=0.jpg"><span>后面的排好队</span></div>
 	</div>
 	</div>
  </body>
  </body>
  <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.easing.js"></script><!-- animate的动画效果js文件 -->
  <script type="text/javascript" src="mes.js"></script>
  <script type="text/javascript">
  var m=0;
  var dom_width=$(document.body).width();
  var dom_height=$(document.body).height();
  for(var i=0;i<(dom_width*dom_height)/(220*300);i++){
  $("#note").append("<div class='bq'><span class='fz'>"+note[i].text+"</span></div>");
  
  }//标签
  //console.log((dom_width*dom_height)/(220*300));
  var zf=["0","-","0","-","0","-","0","-","0","-"];
  var str=[];
  var st=[];
	$(".bq").each(function(i){
	var num=parseInt(Math.random()*(dom_width/300));
  	var numh=parseInt(Math.random()*(dom_height/220));
  	var number=parseInt(Math.random()*10);
	$(this).css({left:num*300,top:numh*220,transform:"rotate("+zf[number]+numh*7+"deg)"});
	str[i]=zf[number];
	});
 // console.log(str);
  function again(){
    for(var i=1;i<num;i++){
    setTimeout("send('"+i+"')",i*1000);//后台获取的数据添加间隔，避免挤压到一起的处理。。。定时器和for一起使用的大坑！！！！！注意！！！注意！！！！注意！！！
  }
  }
  var boh=$(document.body).width();//获取可视dom的宽度 ||待定使用 bw 或者boh
 // console.log(boh);
  var ph=parseInt($("#barr").height()/44);//获取div的高度
  var pw=$("#barr").width();//获取barr宽度||待定使用 bw 或者boh
  var bw=parseInt($(".barr").css("width"))+150;//偏移量 
  $(".barr").css("left",pw);//初始化位置
  var num=data.length;
 //  console.log(num);

  for(var i=1;i<num;i++){
    setTimeout("send('"+i+"')",i*1000);//后台获取的数据添加间隔，避免挤压到一起的处理。。。定时器和for一起使用的大坑！！！！！注意！！！注意！！！！注意！！！
  }

  function send(i){
   var mth=parseInt(Math.random()*ph+1);//获取随机位置
  $("#barr").append("<div style='top:"+mth*30+"px; left:"+boh+"' class='barr'><img class='bim' src='"+data[i].img+"'><span>"+data[i].text+"</span></div>");	//获取数据添加
  //console.log($(".barr").size());
  console.log(m);
  $(".barr:eq("+m+")").animate({left:"-"+bw},30000,"easeOutSine");//添加动画
	 $(".barr").on("mouseenter",function(){
		$(this).stop().animate();
	 });
	 $(".barr").on("mouseleave",function(){
	 $(this).animate({left:"-"+bw},30000,"easeOutSine");//添加动画
	 });
	 m++;
  }
 function add(){
 	var mth=parseInt(Math.random()*ph+1);//获取随机位置
 	//console.log(mth);
 	 m=$(".barr").size();
    var str=$("input[name='mes']").val();//
 	$("#barr").append("	<div style='top:"+mth*30+"px; left:"+boh+"' class='barr'><img class='bim' src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2798762947,3742112450&fm=27&gp=0.jpg'><span>"+str+"</span></div>");	//本地添加弹幕
 	$(".barr:eq("+m+")").animate({left:"-"+bw},30000,"easeOutSine");//添加动画
 	// console.log($(".barr").size());
 		 $(".barr").on("mouseenter",function(){
		$(this).stop().animate();
	 });
	 	 $(".barr").on("mouseleave",function(){
	 $(this).animate({left:"-"+bw},30000,"easeOutSine");//添加动画
	 });
	 m++;
 	//这个地方写其他的待定
 }
 setInterval(function(){mov(bw);},5000);//定时执行移除方法
 function mov(bw){
 //移除显示的弹幕
// console.log("bw"+bw);
	$(".barr").each(function(){
	if($(this).css("left")=="-"+bw+"px"){
	$(this).remove();
	}
	});
 }
	 $(".barr").on("hover",function(){
		$(this).stop(true);
	 });
  </script>
</html>
